<template>
  <div class="select-all">
    <el-select
      multiple
      collapse-tags
      v-model="selectAreaId"
      @change="changeSelect"
      filterable
          clearable

        @visible-change="change($event,selectAreaId)"
      placeholder="请选择"
     >
      <el-checkbox v-model="checked" collapse-tags multiple @change="selectAll">全选</el-checkbox>
      <el-option v-for="item in List" :key="item.key" :label="item.name" :value="item.key"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
    name:'All',
    props:{
            areaList:{
                type:Array,
                default:()=>{
                    return []
                }
               
            }
    },
    data(){
            return{
                selectAreaId:[],
                checked:false,
                // areaList:[]
            }
    },
    computed:{
        List(){
            return this.areaList
        }
    },
  methods: {
    selectAll() {
      this.selectAreaId = [];
      if (this.checked) {
        this.areaList.map(item => {
          this.selectAreaId.push(item.key);
        });
      } else {
        this.selectAreaId = [];
      }

     this.$emit('selectAll',this.selectAreaId)
    },
    changeSelect(val) {
      if (val.length === this.areaList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
     this.$emit('selectAll',this.selectAreaId)
    },
  empty(){
    this.selectAreaId=[]
        this.checked = false;
  },
   change(e, value) {
     var str ='';
      if (value.length == 0) {
        return;
      }
      if (!e) {
        if (value.includes(8008)) {
          str += "0;";
          if (value.length > 1) {
            str += "1;";
          }
        } else {
          if (value.length > 0) {
            str += "1;";
          }
        }
      }
       this.$emit('selectAllbulr', str)
    }
  }
};
</script>
<style scoped>
.select-all{
    display: inline-block;
}
.el-checkbox:last-of-type {
  margin-left: 15px;
}
</style>